<template>
	<view class="content">
		<view class="info-box" v-if="data2">
			<view class="ac-title"> {{data2.title}} </view>
			<view class="ac-info"><u-icon name="clock" color="#999999"></u-icon> 活动时间：{{data2.activity_time}}
			</view>
			<view class="ac-info"><u-icon name="map" color="#999999"></u-icon> 地址： {{data2.address}}</view>
			<view class="qrimg">
				<!-- {{cid}}-------{{val}} -->
				<!-- <tki-qrcode ref="qrcode" :cid="cid" :val="val" :loadMake="true" :size="200" unit="px" pdground="#00ffff" background='#333333' foreground="#ffffff"/> -->
			<!-- 	<canvas id="code" canvas-id="code" style="width: 100px;height: 100px;"></canvas> -->
			<!-- 上面二维码组件有bug,这里没有按照开发文档进行，就使用其他的二维码组件 -->
			<canvas id="qrcode" canvas-id="qrcode" style=" width: 200px; height: 200px; margin: 0px auto; "></canvas>
			 </view>
			<view class="qrcode-tips">凭二维码签到 </view>
		</view>
		<view class="bk20"> </view>
		<view class="info-box">
			<view class="info-title">报名信息 </view>
			<view class="row">
				<view class="label">姓名 </view>
				<view class="value"> {{data.name}}</view>
			</view>
			<view class="row">
				<view class="label">手机号 </view>
				<view class="value"> {{data.phone}}</view>
			</view>
			<view class="row" v-if="data.extension">
				<view class="label">扩展信息 </view>
				<view class="value"> {{data.extension}}</view>
			</view>
		</view>
		<view class="bk20"> </view>
		<view class="info-box">
			<view class="info-title">收费信息 </view>
			<view class="row">
				<view class="label">费用 </view>
				<view class="value" v-if="data.fee>0"> ￥{{data.fee*100/100}}</view>
				<view class="value" v-else> 免费 </view>
			</view>
		</view>
		<view class="bk20"> </view>

	</view>

</template>


<script>
	import tkiQrcode from "tki-qrcode/components/tki-qrcode/tki-qrcode.vue"
	// 这里的二维码使用UQRCode的
	import UQRCode from 'uqrcodejs/uqrcode.js'
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				id: 0,
				data: {},
				data2: {},
				acImgs: [],
				val: '',
				cid: '',
			}

		},
		onLoad(e) {
			this.id = e.en_id
			this.loadData()
			setTimeout(() => {
				this.showdata()
			}, 500)
		},
		onReady() {
		 
		},
		methods: {
			loadData() {
				let params = {
					id: this.id,
				}
				uni.$u.http.get('/enrollment/detail', {
					params: params
				}).then((res) => {
					if (res.code == 1) {
						this.data = res.data
					}
				})
				// setTimeout(()=>{
				//   this.showdata()
				// },100)
			},
			showdata() {
				let params2 = {
					acid: this.data.activity_id,
				}
				uni.$u.http.get('/enrollment/index3', {
					params: params2
				}).then((res) => {
					if (res.code == 1) {
						let url = window.location.href
						// alert(url)
						url = url.replace('en_detail', 'ac_enrollment') + '&ac_id=' + res.data.id
						// alert(url)
						console.log(url)
						this.val = url
						this.cid = 'qrcode_' + res.data.id
						this.data2 = res.data
						
						
						
						// 下面一段是二维码生成
						  // 获取uQRCode实例
						  var qr = new UQRCode();
						  // 设置二维码内容
						  qr.data = this.val;
						  // 设置二维码大小，必须与canvas设置的宽高一致
						  qr.size = 200;
						  // 调用制作二维码方法
						  qr.make();
						  // 获取canvas上下文
						  var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
						  // 设置uQRCode实例的canvas上下文
						  qr.canvasContext = canvasContext;
						  // 调用绘制方法将二维码图案绘制到canvas上
						  qr.drawCanvas();
						
						
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: rgb(249, 249, 249);

		.bk20 {
			height: 20px;
		}

		.info-box {
			padding: 20px;
			border-radius: 28px;
			background: #FFFFFF;

			.info-title {
				font-size: 18px;
				font-weight: 600;
				line-height: 2;
				color: rgba(51, 51, 51, 1);
			}

			.row {
				display: flex;
				line-height: 3;
				border-bottom: 1px solid #efefef;

				.label {
					width: 100px;
				}
			}

			.ac-title {
				font-size: 18px;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 10px;
			}

			.ac-info {
				font-size: 12px;
				font-weight: 400;
				line-height: 2;
				color: #999999;
				display: flex;

				/deep/.u-icon {
					margin-right: 4px;
				}
			}

			.qrimg {
				width: 100%;
				height: 200px;
				// border: 1px solid black;
				// text-align: center;
				padding: 10px 0px;
			}

			.qrcode-tips {
				line-height: 2;
				font-size: 12px;
				color: rgba(153, 153, 153, 1);
				text-align: center;
			}
		}

	}
</style>